<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/grape.css" rel="stylesheet"/>
    <link href="css/base.css" rel="stylesheet"/>
    <link href="css/common.css" rel="stylesheet"/>

    <script src="js/zepto.js"></script>
    <script src="js/touch.js"></script>

</head>

<script>
    $(function(){



        var oRun=$('#run');
        var n=-200;
        oRun.swipeLeft(function(){
              n=n-200;
            oRun.css('transform','translate('+n+'px)');

        });

    });
</script>
<body>
      <div style="width:200px; height:200px; border:5px solid red">
          <div style="width:1000px; overflow:hidden" id="run">
              <img class=" fl" src="images/1.jpg" alt="" style="width:200px; height:200px;"/>
              <img class=" fl" src="images/2.jpg" alt="" style="width:200px; height:200px;"/>
              <img class=" fl " src="images/3.jpg" alt="" style="width:200px; height:200px;"/>
              <img class=" fl" src="images/4.jpg" alt="" style="width:200px; height:200px;"/>
              <img class=" fl " src="images/5.jpg" alt="" style="width:200px; height:200px;"/>
          </div>
      </div>




</body>
</html>